import "./part.js";

$(function(){
    
    // 功能部分 
    // 处理顶部的显示隐藏功能 : 
    function handlerTopleftOver(){
        // 1. 给当前触发事件的元素添加类名 : active 
        // 2. 让当前元素的子集元素 .top-menu 显示出来 

        // 事件处理函数之中怎么找到对应的dom对象 ? this 
        // console.log( this );
        // 我们在写jQuery代码的时候一定要区分什么事原生dom对象，什么是jquery的实例对象; 
        // 如果我们正在操作的是原生dom对象想要转换成jQuery实例对象那么我们需要 $( dom对象 )再去操作才可以使用jquery的api; 
        // console.log( $(this) );
        $(this)
            // 添加active类名
            .addClass("active")
            // 查找子集元素
            // find() 找后代元素; 
            // children() 找直接子集元素; 
            .find(".top-menu")
            // .css({
            //     display : "block"
            // })
            .stop(true)
            .slideDown( 50 )
    }
    function handlerTopleftOut(){
        $(this)
            // 添加active类名
            .removeClass("active")
            // 查找子集元素
            // find() 找后代元素; 
            // children() 找直接子集元素; 
            .find(".top-menu")
            // .css({
            //     display : "none"
            // })
            .stop(true)
            .slideUp( 50 )
    }
    // 事件添加部分
    // 处理顶部的显示隐藏功能事件添加;
    $(".top-left li").on("mouseenter", handlerTopleftOver)
    $(".top-left li").on("mouseleave", handlerTopleftOut)


    // 为你推荐部分页面渲染 : 
    // - 请求加载, 再去渲染页面; 

    function getRecommendData(){
        // 加载数据的内容，和数据的数量都是由参数来决定的; 
        let options = {
            // 根据接口文档提供的参数可知，我们现在一次性加载30条数据需要传递pagesize 属性!; 
            data : {
                pagesize : 30
            }
        }
        return $.ajax( "http://localhost:8888/goods/list" , options )
    }

    // function renderRecommend( data ){
    //     // 获取响应数据之中的商品列表; 
    //     let { list } = data;    
    //     // 把商品列表之中的结构进行字符串拼接，拼接之后放入到 recommend-list 结构之中; 
    //     $(".recommend-list").html(
    //         list.map( item => {
    //             return  `<div class="recommend-box">
    //                         <img src="${ item.img_big_logo }" alt="">
    //                     </div>`
    //         }).join("")
    //     )
    // }

    // 使用懒加载之后的语法 : 
    function renderRecommend( data ){
        // 获取响应数据之中的商品列表; 
        let { list } = data;    
        // 把商品列表之中的结构进行字符串拼接，拼接之后放入到 recommend-list 结构之中; 

        // 等待图片的地址; 
        let loadingsrc = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F2e875b78e4979cf750ff082b1b7561879f1e8ac377f4-hEUmN7_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668865613&t=c5c2e5c902dd89057288085fe6eca1c9";


        // - 把正常的图片资源放在了data-src属性之中; 
        // - 设置了默认图片资源( 图片资源要一致 )
        // - 给图片添加了lazy类名; 
        $(".recommend-list").html(
            list.map( item => {
                return  `<div class="recommend-box" data-id=${ item.goods_id }>
                            <img class="lazyload" src="${ loadingsrc }" data-src="${ item.img_big_logo }" alt="">
                            <p>${item.title}</p>
                        </div>`
            }).join("")
        )
        // 调用懒加载功能; 
        lazyload();
    }

    getRecommendData().done( renderRecommend )

    // 详情页部分功能 

    function jumpToDetail(){
        // 在jquery事件委托处理函数之中 this 指向当前触发事件的dom对象的;  
        console.log( $(this).attr("data-id"));
        // 实现页面跳转功能; 
        // 携带数据的时候我们可以使用url路径携带，在路径上通过hash格式携带商品id; 
        // 哈希格式是 : url#hash值 方式携带商品id; 
        location.href = "detail.html#"+$(this).attr("data-id");
    }
    $(".recommend-list").on("click" , ".recommend-box" , jumpToDetail )

   
});